<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head lang="zh-CN">
    <base href="<%=basePath%>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>e安全（人脸识别门禁）</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	<link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		.round {
		   padding:10px; width:300px; height:50px;
		   border: 0px solid #dedede;
		   -moz-border-radius: 5px;      /* Gecko browsers	*/
		   -webkit-border-radius: 5px;   /* Webkit browsers	*/
		   border-radius:5px;            /* W3C syntax */
		}
		#imghead2{
    		width:50px;
	        height:50px;
	        border-radius:200px;
    	}
    	.loadingWrap{
		    position:fixed;
		    top:0;
		    left:0;
		    width:100%;
		    height:100%;
		    z-index:300;
		    background-image:url(csh/image/loading.gif);
		    background-repeat:no-repeat;
		    background-position:center center;
		    background-color:#000;
		    background-color:rgba(0,0,0,0.5);
		    filter:alpha(opacity=50);
		}
	</style>
	<script type="text/javascript" src="jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="layer/2.4/layer.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		var code=document.getElementById("code").value;
		$.ajax({
			url:"https://oauth2czy.colourlife.com/oauth/access_token",
			data:{
				application_id:"ICEEANQUAN-ADC5-42B8-BB2E-BC39B211FDED",
				secret:"C28A4BAEA41EF58F08C1",
				code:code,
				grant_type:"authorization_code"
			},
			success:function(s1){
				//alert("s1==refresh_token=="+s1.content.refresh_token);
				$.ajax({
					url:"https://oauth2czy.colourlife.com/oauth/refresh_token",
					data:{
						application_id:"ICEEANQUAN-ADC5-42B8-BB2E-BC39B211FDED",
						grant_type:"refresh_token",
						refresh_token:s1.content.refresh_token
					},
					success:function(s2){
						//alert("s2==access_token=="+s2.content.access_token);
						document.getElementById("access_token").value=s2.content.access_token;
						if(s2.content.access_token == undefined){
							window.location.href="${basePath}/csh/MyJsp.jsp";
						}
						$.ajax({
							url:"https://oauth2czy.colourlife.com/oauth/user/info",
							data:{
								access_token:s2.content.access_token
							},
							success:function(s3){
								//alert("===uuid==="+s3.content.community_uuid);
								document.getElementById("community_uuid").value=s3.content.community_uuid;
								document.getElementById("community_name").value=s3.content.community_name;
								document.getElementById("openid").value=s3.content.openid;
								document.getElementById("mobile").value=s3.content.mobile;
								$.ajax({
									url:"${basePath}/u/doesitExist",
					 					type:"get",
					 					data:{
					 						userid:s3.content.openid
					 						},
					 					header: {
					       				"content-type": "application/json"
					     				},
					     				success:function(data){
					     					var json=JSON.parse(data);
						     				if(json.code==1){
												//alert("openid已注册,点击前往个人中心");
												window.location.href="${basePath}/u/home?userid="+s3.content.openid;
											}else{
												document.getElementById("body").style.display="block";
											}
					     				},
					     				error:function(){
					     					//alert("s4 error");
					     				}
								});
							},
							error:function(){
								//alert("s3 error");
							}
						});
					},
					error:function(){
						//alert("s2 error");
					}
				});
			},
			error:function(){
				//alert("s1 error");
			}
		});
	});
</script>
<script type="text/javascript">

		function face(){
			window.location.href="${basePath}/csh/face.jsp";
		}

		function userInformation(){
			var file=document.getElementById("filepath1").value;
			if(file==""){
				alert("图片上传不能为空");
			}else{
				document.getElementById("1").style.display="block";
				document.getElementById("button").style.display="none";
				$("#form").submit();
			}
		}
		//人脸检测图片上传预览1
         function previewImage1(file){
         	var files = $("#filepath1").prop("files");
         	var formData =new FormData();
         	formData.append("file",files[0]);
         	var filepath1=document.getElementById('filepath1').value;			//获取文件路径
         	var newfilepath1 =filepath1.substring(filepath1.indexOf('.'));
         	var jpg='.jpg',png='.png',jpeg='.jpeg',gif='.gif';
         	if(jpg == newfilepath1 || png==newfilepath1 || jpeg == newfilepath1 || gif==newfilepath1){
         		$.ajax({
  					url:"${basePath}/face/detection",
  					fileElementId:"filepath1",
  					data:formData,
  					type:"post",
  					async:true,
  					processData:false,
  					contentType:false,
  					beforeSend:function(XMLHttpRequest){
  						document.getElementById("1").style.display="block";
  						document.getElementById("button").style.display="none";
	  				},
  					success:function(date){
  					document.getElementById("1").style.display="none";
  					document.getElementById("button").style.display="block";
  					console.log(date);
  					var s=JSON.parse(date);
  					if(s=="413"){
  						alert("图片超出2BM");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s=="0"){
  						alert("图片异常,请重试");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="IMAGE_ERROR_UNSUPPORTED_FORMAT: image_file"){
  						alert("图像无法正确解析，有可能不是一个图像文件、或有数据破损、或图片文件格式不符合要求");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="INVALID_IMAGE_SIZE: image_file"){
  						alert("图片尺寸错误,图片太大或太小");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="INVALID_IMAGE_URL"){
  						alert("无法从指定的路径下载图片，图片路径错误或者无效");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="IMAGE_FILE_TOO_LARGE: image_file"){
  						alert("图片文件过大,请将图片文件大小控制在 2MB 内");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="IMAGE_DOWNLOAD_TIMEOUT"){
  						alert("下载图片超时");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="CONCURRENCY_LIMIT_EXCEEDED"){
  						alert("并发数超过限制,请稍后重试");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="INTERNAL_ERROR"){
  						alert("服务器内部错误");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.faces.length == 0 ){
  						alert("未检测到人脸,请重新选择一张图片,并确保人脸正对画面");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.faces.length>1){
  						alert("图片中不能超过两张头像");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.faces.length == 1){
  						console.log(s.faces[0].face_rectangle.height+"\t"+s.faces[0].face_rectangle.top+"\t"+s.faces[0].face_rectangle.left+"\t"+s.faces[0].face_rectangle.width);
			          	var div = document.getElementById('preview1');
			          	document.getElementById('width').value=s.faces[0].face_rectangle.width;
			          	document.getElementById('height').value=s.faces[0].face_rectangle.height;
			          	document.getElementById('top').value=s.faces[0].face_rectangle.top;
			          	document.getElementById('left').value=s.faces[0].face_rectangle.left;

			          	if (file.files && file.files[0]){
				            div.innerHTML ='<img id=imghead1>';
				            var img = document.getElementById('imghead1');
				            img.onload = function(){
			                  var rect = clacImgZoomParam(150, 150, img.offsetWidth, img.offsetHeight);
				              img.width  =  rect.width;
				              img.height =  rect.height;
				              img.style.marginTop = rect.top+'px';
			           	};
				            var reader = new FileReader();
				            reader.onload = function(evt){
				            img.src = evt.target.result;
				        };
				            reader.readAsDataURL(file.files[0]);
			          	}else{//兼容IE

				            file.select();
				            var src = document.selection.createRange().text;
				            div.innerHTML = '<img id=imghead>';
				            var img = document.getElementById('imghead');
				            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
				            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
				            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
				            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
			          	}
  					}
  					},
  					error:function(date){
  					alert("图片异常");
  					document.getElementById('filepath1').value="";
	         		var img=document.getElementById("imghead1");
					img.src="${basePath}/csh/image/owner.jpg";
					img.style.height="150px";
					img.style.width="80%";
  				}
  			});
         	}else{
         		alert("不是图片");
         		document.getElementById('filepath1').value="";
         		var img=document.getElementById("imghead1");
				img.src="${basePath}/csh/image/owner.jpg";
				img.style.height="150px";
				img.style.width="80%";
         	}
        }
		function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight ){
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                if( rateWidth > rateHeight ){
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else{
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
	</script>
	<script type="text/javascript">
	function imageUpload(){
		var access_token=document.getElementById("access_token").value;
		var community_uuid=document.getElementById("community_uuid").value;
		window.location.href="${basePath}/csh/imageUpload.jsp?access_token="+access_token+"&community_uuid="+community_uuid;
	}

	function CardNumber(){
		var openid=document.getElementById("openid").value;
		var mobile=document.getElementById("mobile").value;
		var community_name=document.getElementById("community_name").value;
		window.location.href="${basePath}/u/JumpCardNumber?openid="+openid+"&mobile="+mobile+"&community_name="+community_name;
	}
</script>
</head>
  <body id="body" style="display: none;">
  	<div class="container-fluid">
      <div class="row">
      	<table border="0px solid red" width="100%" height="100%">
     		<tr height="15%">
     			<td colspan="2" align="center"><img alt="" src="img/1204650566.jpg" style="width: 100%"></td>
     		</tr>
     	<tr height="5%">
     			<td colspan="2" align="center"></td>
     		</tr>
     		<tr height="15%">
     			<td colspan="2" align="center">
     				 	<span style=" color: 42b2e4">再无丢卡忘带卡烦恼</span><br/>
     				 	<span style=" color: 42b2e4">刷脸开门更便捷</span>
     			</td>
     		</tr>
     		<tr height="35%">
     			<td colspan="2" align="center" onclick="imageUpload()">
     				 	<img alt="" src="img/1266476986.jpg" style="width: 180px;height: 180px">
     			</td>
     		</tr>
     		<tr height="10%">
     			<td colspan="2" align="center" onclick="CardNumber()">
     				 	<input type="button" value="授权卡购买" style="width: 200px; background-color: #49a1f2; color: white; font-size: 16px;" class="round">
     			</td>
     		</tr>
     		<tr height="20%">
     			<td colspan="2" align="center">
     				<input id="code" type="hidden" value="<%=request.getParameter("code")%>">
     				<input id="access_token" type="hidden" value="">
     				<input id="community_uuid" type="hidden" value="">
     				<input id="community_name" type="hidden" value="">
     				<input id="openid" type="hidden" value="">
     				<input id="mobile" type="hidden" value="">
     			</td>
     		</tr>
     	</table>
      </div>
    </div>
  </body>
</html>
